//  跳转页面
const deliaBox = document.querySelector('.header>div>.delia')
const carBox = document.querySelector('.header>div>.car')
const exitBox = document.querySelector('.header>div>.exit')
const login = window.localStorage.getItem('login')
carBox.addEventListener('click',() =>{
  if (!login) {
    window.localStorage.setItem('url', 'cart')
    window.alert('您还没有登录,请登录后再来查看购物车! ^_^')
    window.location.href = './login.html'
    return
  }
  window.location.href = './cart.html'
})

exitBox.addEventListener('click',() =>{
  window.location.href = './index.html'
})
deliaBox.addEventListener('click',() => {
  window.location.href = './login.html'
})


//  搜索引擎
const inp = document.querySelector('.nav > .select > .selecttop > input')
const ul = document.querySelector('.nav > .select > .selecttop >ul')

inp.oninput = async function () {
  const text = this.value.trim()
  const res = await pAjax({
    url: '/select',
    dataType: 'json',
    data: `keyword=${text}`
  })
  if (!res.Data) {
    ul.classList.remove('active')
    return
  }
  // 代码执行到这里, 说明有内容需要渲染
  let str = ''
  res.Data.forEach(item => {
    str += `<li>${ item.name }</li>`
  })
  ul.innerHTML = str
  ul.classList.add('active')
}

const contentBox = document.querySelector('.content')
const id = window.sessionStorage.getItem('id')
const bottom = document.querySelector('.bottom')
// 判断一下, 如果没有 id , 直接跳转回列表页
if (!id) {
  window.location.href = './list.html'
  throw new Error('没有您查看的商品详情')
}


//信息
getInfo()
async function getInfo() {
  const res = await pAjax({
    url: '/xq' + `${id}`,
    dataType: 'json',
    method: 'POST'
  })
  console.log(res.Data);

  contentBox.innerHTML = `
  <div class="pic">
  <div class="box" id="box2">
      <div class="show">
          <img src="https://ceair.oss-cn-shanghai.aliyuncs.com/image${res.Data.picture[0].picUrl}"
              alt="">
          <div class="mask"></div>
      </div>
      <div class="list">
          <p class="active">
              <img src="https://ceair.oss-cn-shanghai.aliyuncs.com/image${res.Data.picture[0].picUrl}"
                  data-show="https://ceair.oss-cn-shanghai.aliyuncs.com/image${res.Data.picture[0].picUrl}"
                  data-enlarge="https://ceair.oss-cn-shanghai.aliyuncs.com/image${res.Data.picture[0].picUrl}"
                  alt="">
          </p>
          <p>
              <img src="https://ceair.oss-cn-shanghai.aliyuncs.com/image${res.Data.picture[1].picUrl}"
                  data-show="https://ceair.oss-cn-shanghai.aliyuncs.com/image${res.Data.picture[1].picUrl}"
                  data-enlarge="https://ceair.oss-cn-shanghai.aliyuncs.com/image${res.Data.picture[1].picUrl}"
                  alt="">
          </p>
          <p>
              <img src="https://ceair.oss-cn-shanghai.aliyuncs.com/image${res.Data.picture[2].picUrl}"
                  data-show="https://ceair.oss-cn-shanghai.aliyuncs.com/image${res.Data.picture[2].picUrl}"
                  data-enlarge="https://ceair.oss-cn-shanghai.aliyuncs.com/image${res.Data.picture[2].picUrl}"
                  alt="">
          </p>
      </div>
      <div class="enlarge" style="background-image: url(https://ceair.oss-cn-shanghai.aliyuncs.com/image${res.Data.picture[0].picUrl});"></div>
  </div>
</div>
<div class="text">
  <h1 class="head">${res.Data.name}</h1>
  <div class="recommand">
  ${res.Data.recommend_desc}
</div>
  <div class="headNo">
      <span class="bh">商品编号</span>
      <span class="bhNo">${res.Data.product_no}</span>
  </div>
  <div class="clear"></div>


  <div class="clear"></div>
  <div class="choose_wrap" style="position: relative;">
      <div>

          <dl class="item mallprice">
              <dt>商城价</dt>
              <dd class="tl w360">
                  <span id="integral" style="display: none;">积分</span>
                  <span class="small" id="small" style="margin-left: 10px;">现金</span>
                  <div class="through oldprice" id="oldprice02">${res.Data.priceList[0].maxPrice}</div>
              </dd>
              <div class="clear"></div>
          </dl>


          <dl class="item">
              <dt style="height: 44px;padding-top: 10px;">操作说明</dt>
              <dd class="tc w360">
                  <div class="tips red" id="minmax"
                      style="line-height: 100%;text-align: left;margin-left: 10px;margin-top:10px;">
                      积分调整范围0- ${ res.Data.priceList[0].maxPoint}</div>
                  <div
                      style="line-height: 100%;text-align: left;margin-left: 10px;margin-top:10px;margin-bottom:10px;">
                      调整积分范围,现金会随着积分加减而变化</div>
              </dd>
              <div class="clear"></div>
          </dl>
      </div>

      <div id="attrcontainer">
          <dl class="item2" style="border-bottom: none;">
              <dt>颜色</dt>
              <dd class="tc w360">
                  <div class="choose_model" id="choose_model0">
                      <div class="coloritem"><a href="javascript:;" sort="0" title="${res.Data.attributes[0].values[0].Name}" class="active"> <span
                                  fatherby="choose_model0" data_sysno="21098"
                                  belong="375326">${res.Data.attributes[0].values[0].Name}<i></i></span></a>
                                  
                      </div>
                      </div>
                  </div>
              </dd>
              <div class="clear"></div>
          </dl>
          <div class="line"></div>
          <div class="clear"></div>
      </div>
      <div class="empty">
          <dl class="item2" style="border-top:solid 1px #f2f2f2;border-left: solid 1px #f2f2f2;">
              <dt>数量</dt>
              <dd class="w360 ">
                  <p id="productnum">
                  </p>
                  <p class="price_PID mt10 number countbox" maxinteger="0">
                      <input type="hidden" value="2" name="number">

                      <input class="input" id="totalcount" value="1">

                      <span id="number_SY">
                          <span class="add up" id="numplus" name="加">+</span>
                          <span class="add down" id="numsub" name="减">-</span>
                      </span>
                  </p>
                  <p class="ml10" id="remaining_number">剩余<span>${res.Data.stock[0].quanity}</span>件</p>
                  <br>
                  <p class="ml10 red" id="graybtn" style="margin-top: -12px; line-height: 100%;">

                  </p>
              </dd>

          </dl>
          <div class="clear"></div>
          <div class="btnBlue " id="btncaropear">
              <a href="#" class="blue2 mr10" id="nowBuy">立即购买</a>
              <a href="" id="addtocar" name="cart" class="adjunction"> 加入购物车</a>
          </div>
      </div>
  </div>
</div>
</div>
  `
  bottom.innerHTML = `
      <p>商品详情</p>
       </hr>
       ${res.Data.app_ViewDesc}
  `
}


contentBox.addEventListener('mouseover', e => {
  e = e || window.event
  const target = e.target || e.srcElement
  const show = document.querySelector('.content>.pic>.box>.show')
  const mask = document.querySelector('.content>.pic>.box>.show>.mask')
  const list = document.querySelector('.content>.pic>.box>.list')
  const enlargebox = document.querySelector('.content>.pic>.box>.enlarge')
  const textBox = document.querySelector('.content >.text')
  console.log(123);
  //show 的宽高
  const show_w = show.offsetWidth
  const show_h = show.offsetHeight
  //mask 的 宽高
  const mask_w = parseInt(window.getComputedStyle(mask).width)
  const mask_h = parseInt(window.getComputedStyle(mask).height)
  //背景图 的 宽高
  const bg_w = parseInt(window.getComputedStyle(enlargebox).backgroundSize.split(' ')[0])
  const bg_h = parseInt(window.getComputedStyle(enlargebox).backgroundSize.split(' ')[1])

  // 调整比例
  //  enlarge 盒子尺寸 = 背景图尺寸 * mask 盒子尺寸 / show 盒子尺寸
  const en_height = bg_h * mask_h / show_h
  const en_width = bg_w * mask_w / show_w

  // 赋值
  enlargebox.style.width = en_width + 'px'
  enlargebox.style.height = en_height + 'px'
  // 移入移出
  show.addEventListener('mouseover', () => {
    mask.style.display = 'block'
    enlargebox.style.display = 'block'
  })

  show.addEventListener('mouseout', () => {
    mask.style.display = 'none'
    enlargebox.style.display = 'none'
  })

  // 列表切换
  list.addEventListener('click', e => {
    e = e || window.event
    if (target.nodeName === 'IMG') {
      const show_url = target.dataset.show
      const enlarge = target.dataset.enlarge
      // console.log(show_url);
      console.log(enlarge);
      show.firstElementChild.src = show_url
      enlargebox.style.backgroundImage = `url(${enlarge})`
      for (let i = 0; i < list.children.length; i++) {
        list.children[i].classList.remove('active')
      }
      target.parentElement.classList.add('active')
    }
  })

  // 跟随移动

  show.addEventListener('mousemove', e => {
    e = e || window.event
    const target = e.target || e.srcElement
    let x = e.offsetX - mask_w / 2
    let y = e.offsetY - mask_h / 2
    if (x <= 0) x = 0
    if (y <= 0) y = 0
    if (x >= show_w - mask_w) x = show_w - mask_w
    if (y >= show_h - mask_h) y = show_h - mask_h
    mask.style.left = x + 'px'
    mask.style.top = y + 'px'
    const bx = x * en_width / mask_w
    const by = y * en_height / mask_h
    enlargebox.style.backgroundPosition = `-${bx}px  -${by}px`
  })
  // textBox.addEventListener('click', e => {
  //   console.log(12345);
  //   e = e || window.event
  //   const target = e.target || e.srcElement
  //   if (target.className === 'adjunction') {
  //      window.alert('添加购物车成功')
  //      return
  //   }
  // })

})

